<template>
    <div id="exhibition-banner">
        <div class="ban-bg">
            <div class="ban-tab-box">
                <div class="ban-tab" :class="{navtab_active:navTab_btn==0}" @click="changeNavTab(0)"><div class="text">展馆信息</div></div>
                <div class="ban-tab" ><div class="text">周边设施</div></div>
                <div class="ban-tab" :class="{navtab_active:navTab_btn==2}" @click="changeNavTab(2)"><div class="text">展览计划</div></div>
                <div class="ban-tab" :class="{navtab_active:navTab_btn==3}" @click="changeNavTab(3)"><div class="text">联系展馆</div></div>
            </div>
        </div>
    </div>
</template>
<script>
import "swiper/dist/css/swiper.css";
export default {
    name: "exhibitionBanner",
    data() {
        return {
            navTab_btn:0,
        };
    },
    created(){
        this.navTab_btn = this.$route.query.defaultNav;
    },
    methods:{
        changeNavTab(activeNum){
            this.navTab_btn = activeNum;
            this.$emit('child-change-banner',this.navTab_btn);
        }
    }
};
</script>

<style lang="scss" scoped>
#exhibition-banner {
    .ban-bg {
        margin: 0 auto;
        width: 1236px;
        height: 357px;
        position: relative;
        background-image: url("../../assets/exhibition-nav-bg.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;

        &::after{
            content: "";
            width:100%;
            height:100%;
            position: absolute;
            left:0;
            top:0;
            background: inherit; //继承父级属性
            filter: blur(2px); //高斯模糊
        }
        
        .ban-tab-box {
            display: flex;
            justify-content: space-around;
            align-items: center;
            z-index:2;
            position: absolute;
            bottom: 46px;
            left: 0;
            width: 100%;
            .ban-tab {
                width: 93px;
                height: 45px;
                background: rgba(255, 255, 255, 0.2);
                padding:13px 11px 10px;
                cursor: pointer;
                
                .text{
                    height:100%;
                    color:#fff;
                    font-size:23px;
                    letter-spacing: 10;
                    border-bottom:1.5px solid #fff; 
                }
            }
            .navtab_active{
                position: relative;
                .text{
                    color:#C81622;
                    border-bottom:1.5px solid #C81622; 
                }
                &::after{
                    content: "";
                    position: absolute;
                    left:10px;
                    top:113px;
                    border-top: 47px solid #C81622;
                    border-right: 47px solid transparent;
                    border-bottom: 47px solid transparent;
                    border-left: 47px solid transparent;
                }
            }
        }
    }
}
</style>